<template>
	<view class="list">
		<view :class="value === index ? 'list-item ac' : 'list-item'" v-for="(it,index) in list" @click="setValue(index)">
			<view class="list-item-num">
				
				<image :src="ossUrl + `/static/7.png`" mode="" v-if="value === index"></image>
				<text v-else>{{index + 1}}</text>
			</view>
			<view class="list-item-c">
				<view class="list-item-c-title">
					{{it.title}}
				</view>
				<view class="list-item-c-time">视频时长: {{formatTime(it.duration)}}</view>
			</view>
			<template v-if="info.qx != 1">
				<view class="list-item-r list-item-r-wj" v-if="info.user_id === 0">
					<view class="list-item-r-img">
						<image :src="ossUrl + `/static/teaching/密码.png`" mode=""></image>
					</view>
				</view>
				<block v-else>
					<view class="list-item-r" v-if="it.type === 1">
						<view class="list-item-r-free">
							<image :src="ossUrl + `/static/teaching/3.png`" mode=""></image>
							<view>免费</view>
						</view>
						<view class="list-item-r-tx" v-if="it.user_video.status === 1">已学完</view>
					</view>
					<view class="list-item-r list-item-r-wj" v-else>
						<view class="list-item-r-share" v-if="!(Array.isArray(it.fx) && it.fx.length === 0)">
							<image :src="ossUrl + `/static/teaching/2.png`" mode=""></image>
							<view class="list-item-r-share-tx">{{it.fx.name}}</view>
							<view class="list-item-r-share-tx2">{{it.fx.name}}</view>
						</view>
						<view class="list-item-r-img">
							<image :src="ossUrl + `/static/teaching/密码.png`" mode="" v-if="!(Array.isArray(it.fx) && it.fx.length === 0) || !it.fx.type === 1"></image>
						</view>
					</view>
				</block>
			</template>
			
		</view>
	</view>
</template>

<script>
	import {InformationCourseEvaluation} from '@/common/http/api.js'
	export default {
		props:['list','value','info'],
		data(){
			return {
				
			}
		},
		created() {
			
			
		},
		methods:{
			formatTime(seconds) {
				// 检查参数是否为数字，如果不是或者是NaN，则使用默认值0
				if (typeof seconds !== 'number' || isNaN(seconds)) {
					seconds = 0;
				}
			
				// 计算分钟和秒数
				let minutes = Math.floor(seconds / 60);
				let remainingSeconds = seconds % 60;
			
				// 将分钟和秒数转换为两位数的字符串
				let minutesStr = String(minutes).padStart(2, '0');
				let secondsStr = String(remainingSeconds).padStart(2, '0');
			
				// 返回格式化后的时间字符串
				return `${minutesStr}:${secondsStr}`;
			},
			setValue(e){
				this.$emit('input', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		width: 690rpx;
		margin: 0 auto;
		background: white;
		padding: 30rpx 0;
		.list-item {
			width: 100%;
			box-sizing: border-box;
			padding: 34rpx;
			display: flex;
			align-items: center;
			background: #F6F7F8;
			border-radius: 10rpx;
			margin-bottom: 19rpx;
			.list-item-num {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				padding-right: 34rpx;
				image {
					width: 35rpx;
					height: 38rpx;
				}
			}
			.list-item-c {
				flex: 1;
				min-width: 0;
				.list-item-c-title {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #131313;
					margin-bottom: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.list-item-c-time {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.list-item-r {
				width: 167rpx;
				height: 96rpx;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				position: relative;
				.list-item-r-free {
					width: 81rpx;
					height: 43rpx;
					position: absolute;
					right: -34rpx;
					top: -34rpx;
					image {
						width: 100%;
						height: 100%;
					}
					view {
						width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 9;
					}
				}
				.list-item-r-share {
					//width: 100%;
					height: 43rpx;
					position: absolute;
					right: -34rpx;
					top: -34rpx;
					image {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 2;
					}
					view {
						// width: 100%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						
					}
					.list-item-r-share-tx2 {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 3;
					}
				}
				.list-item-r-tx {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
					
				}
			}
			.list-item-r-wj {
				align-items:center;
				justify-content: flex-end;
				width: none!important;
				.list-item-r-share {
					width: none;
					white-space: nowrap;
					
					&>view {
						padding: 0 15rpx;	
						box-sizing: border-box;
					}
					// .list-item-r-share-tx {
					// 	color: red;
					// }
					// .list-item-r-share-tx2 {
					// 	color: yellow;
					// }
				}
				.list-item-r-img {
					width: 34rpx;
					height: 30rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.ac {
			.list-item-c-title {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #12B475!important;
			}
		}
	}
</style>